<template>
	<div>
		<van-nav-bar
		  title="编辑资料"
		  left-arrow
		  @click-left="onClickLeft"
		/>
		<br>
		<van-cell-group>
			<van-cell title="头像" is-link />
			<van-cell title="签名" 
			style="align-items: center;"
			:value="info.gxqm?info.gxqm:'编辑个性签名'" is-link
			:value-class="info.gxqm? 'haveContent':''"
			 />
		</van-cell-group>
		<br>
		<van-cell-group>
			<van-field v-model="info.name"
			 label="昵称"
			 :error="nameError"
			 @blur="!nameError? changeInfo('name',info.name):undefined"
			 placeholder="请输入昵称"
			 maxlength="14"
			 />
			<van-field
			  readonly
			  clickable
			  label="性别"
			  :value="info.sex"
			  placeholder="选择性别"
			  @click="showSex = true"
			/>
			<van-popup v-model="showSex" round position="bottom">
			  <van-picker
			    show-toolbar
				:default-index = 'columns.indexOf(info.sex)'
			    :columns="columns"
			    @cancel="showSex = false"
			    @confirm="onConfirmSex"
			  />
			</van-popup>
			<van-field
			  readonly
			  clickable
			  label="生日"
			  :value="info.bir"
			  placeholder="0000-00-00"
			  @click="showBir = true"
			/>
			<van-popup v-model="showBir" round position="bottom">
				<van-datetime-picker
				 :value = "new Date(info.bir)"
				 type="date"
				 :min-date="new Date(1901,0,1)"
				 :max-date="new Date()"
				 @change="dateChange"
				 @confirm="dateConfirm"
				>
					<template #columns-top >
						<div class="date-info">
							<van-field
							  readonly
							  label="年龄"
							  :value="info.age"
							/>
							<van-field
							  readonly
							  label="星座"
							  :value="info.constellation"
							/>
						</div>
					</template> 
				</van-datetime-picker>
			</van-popup>
		</van-cell-group>
		<br>
		<van-cell-group>
			<van-field
			  readonly
			  clickable
			  label="职业"
			  :value="info.job"
			  placeholder="选择职业"
			  @click="showJob = true"
			/>
			<van-popup v-model="showJob" round position="bottom">
			  <van-picker
			  show-toolbar
			  :columns="jobcolumns"
			  @cancel="showJob = false"
			  @confirm="onConfirmJob"
			  visible-item-count="10"
			  >
				  <template #option=item>
					<div class="Jobselect">
						<van-tag type="primary">{{item.tag}}</van-tag>
						<span class="text">{{item.text}}</span>
					</div>
				  </template>
			  </van-picker>
			  
			</van-popup>
			<van-field
			  readonly
			  clickable
			  label="所在地"
			  :value="info.area"
			  placeholder="选择所在地"
			  @click="showArea = true"
			  :columns-placeholder="['请选择', '请选择', '请选择']"
			/>
			<van-popup v-model="showArea" round position="bottom">
			  <van-area
			  :value="info.area"
			  :area-list="areaList" 
			  @cancel="showArea = false"
			  @confirm="onConfirmArea"
			  />
			  <!-- show-toolbar -->
			</van-popup>
			<van-field v-model="info.mail"
			 label="邮箱"
			 placeholder="请输入邮箱"
			 @blur="!mailError&&info.mail? changeInfo('mail',info.mail):undefined"
			 :error-message="mailError? '邮箱格式错误':''"
			 />
		</van-cell-group>
		<br>
		<van-cell-group>
			<van-field
			  readonly
			  clickable
			  label="个人说明"
			  :value="info.info"
			  placeholder="介绍一下自己吧"
			  @click="showInfo=true"
			/>
			<van-popup v-model="showInfo" 
			:close-on-click-overlay="false"
			closeable
			close-icon-position="bottom-left"
			close-icon="success"
			position="top"
			@close="changeInfo('info',info.info)"
			>
			<van-field
			  v-model="info.info"
			  rows="6"
			  type="textarea"
			  maxlength="170"
			  placeholder="介绍一下自己吧"
			  show-word-limit
			/><br>
			</van-popup>
		</van-cell-group>
	</div>
</template>

<script>
import { areaList } from '@vant/area-data';
import {Toast} from 'vant'
export default{
	data(){
		return{
			uId:undefined,
			areaList,
			showInfo:false,
			showBir:false,
			showSex:false,
			showJob:false,
			showArea:false,
			columns:['男','女','保密'],
			jobcolumns:[
				{tag:'IT',text:'计算机/互联网/通信'},
				{tag:'医疗',text:'医疗/护理/制药'},
				{tag:'金融',text:'金融/银行/投资/保险'},
				{tag:'商业',text:'商业/服务业/个体经营'},
				{tag:'文化',text:'文化/广告/传媒'},
				{tag:'艺术',text:'娱乐/艺术/表演'},
				{tag:'法律',text:'律师/法务'},
				{tag:'教育',text:'教育/培训'},
				{tag:'行政',text:'公务员/行政/事业单位'},
				{tag:'模特',text:'模特'},
				{tag:'空姐',text:'空姐'},
				{tag:'学生',text:'学生'},
				{tag:'其他',text:'其他职业'}
			],
			info:{
				iId:0,
				gxqm:'小鸟飞翔于蓝色的天空，大海映照着天空的蓝色。架空的蓝色的天空之海，天空之蓝蕴于大海之泪，泪水的蓝色中小鸟飞翔。',
				name:'一柯小白菜',
				sex:"男",
				bir:'2000-10-11',
				age:21,
				constellation:"天秤",
				job:'IT',
				area:'130132',
				mail:'',
				info:''
			},
			bir:'',
			
		}
	},
	created(){
		this.$emit("changeMain",false)
		this.bir = new Date(this.info.bir)
		this.uId = this.$store.state.login.user.uId
		axios.get('./api/GetInfo?key='+this.uId)
			 .then(e=>{
				 let result = e.data
				 // console.log(result)
				 if(!result.isOk)
					throw new Error('信息请求错误')
				 // result.sex = this.columns.indexOf(result.sex)
				 result.data.sex = this.columns[result.data.sex]
				 this.info = result.data
			 }).catch(e=>{
				 Toast.fail(e.toString().slice(6));
			 })
	},
	methods:{
		dateChange(picker){
			const date = new Date(...picker.getValues())
			const thisDate = new Date()
			this.info.age = parseInt((thisDate - date)/(1000*60*60*24*365))
			//12.22->1.19  1.20->  2.19>
			const star = '摩羯水瓶双鱼白羊金牛双子巨蟹狮子处女天秤天蝎射手摩羯'
			const arr = [20,19,21,20,21,22,23,23,23,24,23,22]
			const m = date.getMonth()
			const d = date.getDate()
			this.info.constellation = star.substr(m*2 - (d<arr[m-1]?2:0),2)
		},
		onConfirmArea(value){
			console.log(value)
			console.log(value.map(e=>e.name).toString())
			const result = value.reduce((a,b)=>b.code)
			axios.post('./api/ChangeInfo',{id:this.info.iId,key:'area',value:result})
				.then(e=>{
					this.info.area = result;this.showArea = false
				}).catch(e=>{
					this.showArea = false
				})
			
		},
		onConfirmJob(value){
			const result = value.tag
			axios.post('./api/ChangeInfo',{id:this.info.iId,key:'job',value:result})
				.then(e=>{
					console.log(e.data)
					this.info.job = result;this.showJob = false
				}).catch(e=>{
					console.log(e.data);this.showJob = false
				})
		},
		dateConfirm(value){
			const result = this.dateToString(value,'-')
			axios.post('./api/ChangeInfo',{
					id:this.info.iId,
					key:'bir',
					value:result})
				.then(e=>{
					this.info.bir = result
					return axios.post('./api/ChangeInfo',{id:this.info.iId,
							key:'constellation',value:this.info.constellation})
				}).then(e=>{
					return axios.post('./api/ChangeInfo',{id:this.info.iId,
							key:'age',value:this.info.age})
				}).then(e=>{
					this.showBir = false
					console.log(e)
				}).catch(e=>{
					this.showBir = false
					console.log(e)
				})
			// this.showBir = false
		},
		onConfirmSex(value){
			const result = this.columns.indexOf(value)
			axios.post('./api/ChangeInfo',{id:this.info.iId,key:'sex',value:result})
				.then(e=>{
					this.info.sex = value
					this.showSex = false
				}).catch(e=>{
					this.showSex = false
				})
		},
		onClickLeft(){
			this.$router.push(this.$route.query.herf)
			this.$emit("changeMain",true)
		},
		changeInfo(key,value){//没用
			const postData = {id:this.info.iId,key,value}
			axios.post('./api/ChangeInfo',postData)
				 .then(e=>{
				 	console.log(e.data)
				 }).catch(e=>{
				 	console.log(e)
				 })
		},
	},
	computed:{
		
	}
}
</script>

<style lang="scss" scoped>
.haveContent{
	text-align: left !important;
	flex: 3 !important;
	span{
		color: #000;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
}
.date-info{
	display: flex;
	.van-cell__title{
		width: 3.1em;
	}
	.van-field__value{
		font-weight: 700;
	}
}
.Jobselect{
	width: 60%;
	display: flex;
	// justify-content: center;
	align-items: center;
	// text-align: center;
	.van-tag{
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		margin-right: 10px;
	}
	.text{
		flex:7;
	}
}
</style>
